<template>
	<!-- 轮播图 -->
	<el-row>
		<el-col :span="4">
			<div style="background-color: white; height:100%; width: 100%;" />
		</el-col>
		<el-col :span="16">
			<div style="background-color: white;">
				<el-carousel :interval="3500" arrow="always" height="350px" indicator-position="outside"
					initial-index="0">
					<el-carousel-item v-for="item in this.data.slice(0, 5)" :key="item">

						<div class="pic_item">
							<a @click="toDetilPage(item.id)">
								<img class="small" style="height: 100% ;width:100%" :src="this.imgUrl+item.img" />
								<h3>{{item.restaurantName+item.name}}</h3>
							</a>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
		</el-col>
		<el-col :span="4">
			<div style="background-color: white; height:100%; width: 100%;" />
		</el-col>
	</el-row>
		
	<el-row>
		<el-col :span="1">
			<div style="" />
		</el-col>
		<el-col :span="22">
			<el-input v-model="searchPARAM.name" clearable placeholder="请输入美食名" prefix-icon="Search" style="width: 21%" />
			<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
		</el-col>
		<el-col :span="1">
			<div style="" />
		</el-col>
	</el-row>	
		
	<el-row>
		<el-col :span="1">
			<div style="" />
		</el-col>
		<el-col :span="22">
			<el-card>
				<h2 style="text-align: left; font-family: Helvetica Neue; color: darksalmon; ">热门美食推荐：</h2>

				<el-row v-for="(row,index) in sliceList(this.data,4)" :key="index">
					<el-col :span="6" v-for="(item,i) in row" :key="i">
						<el-card class="foodcard" shadow="hover" @click="toDetilPage(item.id)">
							<el-image :src="this.imgUrl+item.img" style="height: 150px;" />
							<div style="padding: 14px">
								<span>{{item.name}}</span>
								<div class="bottom">
									<el-button type="text" class="button">具体介绍</el-button>
								</div>
							</div>
						</el-card>
					</el-col>

				</el-row>


			</el-card>
		</el-col>
		<el-col :span="1">
			<div style="" />
		</el-col>
	</el-row>


</template>

<script>
	export default {
		name: "Main",
		data() {
			return {
				imgUrl: 'http://localhost:8080/img/',
				data: [],
				//走马灯数据
				carouselData: [],
				pageNum: 1,
				pageSize: 12,
				total: 0,
				searchPARAM: {
					id: '',
					name: '',
					type: '',
					content: '',
					restaurantName: '',
					restaurantAddress: '',
					img: ''
				},

			}
		},

		created() {
			this.load();
		},


		computed: {
			sliceList() {
				return function(data, count) {
					if (data != undefined) {
						let index = 0;
						let arrTemp = [];
						for (let i = 0; i < data.length; i++) {
							index = parseInt(i / count);
							if (arrTemp.length <= index) {
								arrTemp.push([]);
							}
							arrTemp[index].push(data[i])
						}
						return arrTemp
					}
				}
			}
		},

		methods: {

			toDetilPage(food) {
				// this.$router.replace('detailpage')
				this.$router.push({
					path: '/detailpage',
					query: {
						id: food
					}
				})
			},


			load() {
				this.$api.post("/food/page", {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchPARAM: this.searchPARAM
				}).then((res) => {
					this.data = res.data.data.records;
					this.total = res.data.data.total;

				});
			},
		}
	}
</script>
<style scoped>
	.foodcard {
		margin: 10px;
		height: 250px;
	}

	.foodcard:hover {
		margin: 0px;
		height: 250px;
	}

	.el-carousel__item h3 {
		color: white;
		font-size: 2rem;
		opacity: 0.75;
		margin: 0;
		font-family: "宋体";
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}

	.block {
		width: 100%;
	}

	.small {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.pic_item {
		position: relative;
		height: 100%;
	}

	.pic_item:hover {
		cursor: pointer;
	}

	.pic_item img {
		width: 100%;
		height: 100%;
	}

	.pic_item h3 {
		position: absolute;
		left: 8rem;
		bottom: 1rem;
	}
</style>
